<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学子F1左侧作业</title>
    <style>

        .card {
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            background-image: url("img/computer1.png");
            background-repeat: no-repeat;
            background-size: 318px 319px;
            background-position: 265px 35px;
            overflow: hidden;
        }
        .card>.text {
            display: inline-block;
            margin-top: 68px;
            margin-left: 36px;
            width: 245px;
            height: 232px;
        }
        .card>.text>#a{
            font-size:32px;
            color:#333;
            font-weight:lighter;
            margin-bottom: 12px;
        }
        .card>.text>#b{
            font-size: 12px;
            color: #666;
            font-weight: lighter;
            margin-bottom: 24px;
        }
        .card>.text>#c{
            font-size: 24px;
            font-weight: bold;
            color: #0aa1ed;
            margin-bottom: 12px;
        }
        .card>.text>#d{
            font-size: 20px;
            color: #fff;
            width: 132px;
            height: 40px;
            background: #0aa1ed;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="card">
    <div class="text">
        <p id="a">灵越 燃700系列</p>
        <p id="b">酷睿双核i5处理器256G SSD 8GB内存<br>
           英特尔HD显示620含共享显卡内存</p>
        <p id="c">$4999.00</p>
        <button id="d" type="submit">查看详情</button>
    </div>
</div>
</body>
</html>